<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>体质 首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/dropload.css">
    <link rel="stylesheet" href="css/font-awesome.css" />
</head>
<body class="index">

<!-- 头部 -->
<section id="hd">
    <div class="hdr"><a class="a-serv" href="javascript:ysf.open()"></a></div>
    <div class="hdr" style="right: 36px;"><a class="a-message"></a></div>
    <div class="hdr" style="right: 72px;"><a class="a-search"></a></div>
    <a class="" style="left: 10px;position: absolute;display: inline-block"><span class="" style="color: #03bfdc;font-size: 17px;">北京</span><i class="fa fa-chevron-down" style="font-size: 18px;
    color: darkgrey;padding-left: 3px;" aria-hidden="true"></i></a>
</section>
<!-- 头部 end-->

<!-- 主内容 -->
<section id="bd">
    <!-- banner -->
    <div id="banner">
        <div class="slider" style="visibility: hidden">
            <div class="item" v-if="isLogin">
                <div class="con" :style="'background-image:url(img/bg'+sexNum3+'.png);'">
                    <div class="txt">
                        <div class="pic"><img :src="'img/pic'+sexNum9+'.png'" alt=""></div>
                        <h4>{{student.Name}}<i :style="'background-image:url(img/ico-'+sex+'.png)'"></i></h4>
                        <p>{{student.School.Name}}</p>
                    </div>
                    <p></p>
                </div>
            </div>
            <div class="item" v-for="item in list">
                <a class="con" :style="'background-image:url(http://47.93.24.39:8082'+item.PicPath+');'" :href="item.PicHref">
                    <p></p>
                </a>
            </div>
        </div>
    </div>
    <!-- banner end-->
	<div class="m-tab2_jxq">
            <ul>
                <li>
                    <a>
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -486px;"></i><span>自我监测</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:ysf.open()">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -540px;"></i><span>专家指导</span>
                    </a>
                </li>
                <li>
                    <a href="rank.html">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -594px;"></i><span>体育小明星</span>
                    </a>
                </li>
                <li>
                    <a >
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -648px;"></i><span>体育大卖场</span>
                    </a>
                </li>
            </ul>
        </div>
    <div id="article-list">
        <div class="m-tab2">
            <ul>
                <li class="on">
                    <a @click="showRelated(0)">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -702px;"></i><span>政策解读</span>
                    </a>
                </li>
                <li>
                    <a @click="showRelated(1)">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -756px;"></i><span>学校风采</span>
                    </a>
                </li>
                <li>
                    <a @click="showRelated(2)">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -810px;"></i><span>运动技巧</span>
                    </a>
                </li>
                <li>
                    <a @click="showRelated(2)">
                        <i style="background-image:url(img/sprite2.svg);background-repeat: no-repeat;background-size:54px;background-position: 0px -864px;"></i><span>健康方案</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="article-group">
            <div class="item">
                <ul class="ul-list4">
                    <li v-for="e in list[0]">
                        <div class="pic"><a :href="'article.html?id='+e.Id"><img src="img/pic3.jpg" alt=""></a></div>
                        <div class="txt">
                            <h3><a :href="'article.html?id='+e.Id" v-text="e.Title"></a></h3>
                            <p v-text="e.Introduction"></p>
                        </div>
                    </li>
                    <infinite-loading :on-infinite="onInfinite0" ref="infiniteLoading0"></infinite-loading>
                </ul>
            </div>
            <div class="item dn">
                <ul class="ul-list4">
                    <li v-for="e  in list[1]">
                        <div class="pic"><a :href="'article.html?id='+e.Id"><img src="img/pic4.jpg" alt=""></a></div>
                        <div class="txt">
                            <h3><a :href="'article.html?id='+e.Id" v-text="e.Title"></a></h3>
                            <p v-text="e.Introduction"></p>
                        </div>
                    </li>
                    <infinite-loading :on-infinite="onInfinite1" ref="infiniteLoading1"></infinite-loading>
                </ul>
            </div>
            <div class="item dn">
                <ul class="ul-list4">
                    <li v-for="e in list[2]">
                        <div class="pic"><a :href="'article.html?id='+e.Id"><img src="img/pic5.jpg" alt=""></a></div>
                        <div class="txt">
                            <h3><a :href="'article.html?id='+e.Id" v-text="e.Title"></a></h3>
                            <p v-text="e.Introduction"></p>
                        </div>
                    </li>
                    <infinite-loading :on-infinite="onInfinite2" ref="infiniteLoading2"></infinite-loading>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- 主内容 end-->
<!-- 底部 -->
<div class="h50"></div>
<section id="fd">
    <ul class="f-nav">
        <li class="on"><a href="index.html"><i class="icon1"></i>首页</a></li>
        <li><a href="constitution.html"><i class="icon2"></i>体质</a></li>
        <li><a href="constitution.html"><i class="icon-quanzi"></i>圈子</a></li>
        <li><a href="self.html"><i class="icon3"></i>个人</a></li>
    </ul>
</section>
<!-- 底部 end-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="js/vue-infinite-loading.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<link rel="stylesheet" href="css/slick.css"/>
<script src="http://cdn.bootcss.com/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script>
    /**
     * Created by doveaz on 2017/4/5.
     */
    $(function () {
        var initTime = new Date().getTime() * 1000000;
        var slider = new Vue({
            el: '#banner',
            data: {
                list: [],
                isLogin: false,
                student: ''
            },
            computed: {
                sex: function () {
                    return this.student.Sex === '男' ? 'man' : 'woman';
                },
                sexNum9: function () {
                    return this.student.Sex === '男' ? '9' : '10'
                },
                sexNum3: function () {
                    return this.student.Sex === '男' ? '3' : '4'
                }
            },
            mounted: function () {
                var _ = this;
                axios.student('/info')
                    .then(function (res) {
                        if (res.data.Code === 0) {
                            _.isLogin = true;
                            _.student = res.data.Detail;
                        }
                        axios.home('/getslides')
                            .then(function (res) {
                                _.list = res.data.List
                            })
                            .then(function () {
                                $('#banner .slider').slick({
                                    dots: true,
                                    arrows: false,
                                    autoplay: false,
                                    slidesToShow: 1,
                                    autoplaySpeed: 3000,
                                    pauseOnHover: false,
                                    lazyLoad: 'ondemand'
                                });
                                $('.slider').css('visibility','visible');
                            })
                            .catch(function (err) {

                            })
                    })
            }
        })
        var articleList = new Vue({
            el: '#article-list',
            data: {
                list: {
                    0: [],
                    1: [],
                    2: []
                },
                current: 0,
                currentShow: 0
            },
            created: function () {
                var _ = this;
                [0, 1, 2].forEach(function (e) {
                    axios.article('/', {
                        updatetime: initTime,
                        type: e + 1,
                        offset: '0'
                    })
                        .then(function (res) {
                            _.list[e] = res.data.List;
                            _.loaded(e)
                        })
                        .then(function (err) {
                        })

                })
            },
            mounted: function () {
                this.$refs.infiniteLoading1.$emit('$InfiniteLoading:complete');
                this.$refs.infiniteLoading2.$emit('$InfiniteLoading:complete');
            },
            methods: {
                showRelated: function (order) {
                    if (order != this.currentShow) {
                        if ($(window).scrollTop() > 185) {
                            $(window).scrollTop(185)
                        }
                        var arr = [this.$refs.infiniteLoading0, this.$refs.infiniteLoading1, this.$refs.infiniteLoading2];
                        arr.forEach(function (e, index) {
                            if (index === order) {
                                arr[index].$emit('$InfiniteLoading:reset')
                            } else {
                                arr[index].$emit('$InfiniteLoading:complete')
                            }
                        })
                    }
                    $('.article-group .item').eq(this.currentShow).hide().end().eq(order).show()
                    $('.m-tab2 li').eq(this.currentShow).removeClass('on').end().eq(order).addClass('on')
                    this.currentShow = order;
                },
                loaded: function (e) {
                    eval('this.$refs.infiniteLoading' + e).$emit('$InfiniteLoading:loaded')
                },
                onInfinite0: function () {
                    var _ = this;
                    if (_.list[0].length === 0) {
                        return false
                    }
                    if (_.list[0].length > 5) {
                        axios.article('/', {
                            updatetime: initTime,
                            type: 1,
                            offset: _.list[0].length
                        }).then(function (res) {
                            _.list[0] = _.list[0].concat(res.data.List);
                            _.$refs.infiniteLoading0.$emit('$InfiniteLoading:loaded');
                            if (_.list[0].length >= res.data.TotalCount) {
                                _.$refs.infiniteLoading0.$emit('$InfiniteLoading:complete');
                            }
                        })
                    }
                },
                onInfinite1: function () {
                    var _ = this;
                    if (_.list[1].length === 0) {
                        return false
                    }
                    axios.article('/', {
                        updatetime: initTime,
                        type: 2,
                        offset: _.list[1].length
                    }).then(function (res) {
                        _.list[1] = _.list[1].concat(res.data.List);
                        _.$refs.infiniteLoading1.$emit('$InfiniteLoading:loaded');
                        if (_.list[1].length >= res.data.TotalCount) {
                            _.$refs.infiniteLoading1.$emit('$InfiniteLoading:complete');
                        }
                    })
                },
                onInfinite2: function () {
                    var _ = this;
                    if (_.list[2].length === 0) {
                        return false
                    }
                    axios.article('/', {
                        updatetime: initTime,
                        type: 3,
                        offset: _.list[2].length
                    }).then(function (res) {
                        _.list[2] = _.list[2].concat(res.data.List);
                        _.$refs.infiniteLoading2.$emit('$InfiniteLoading:loaded');
                        if (_.list[1].length >= res.data.TotalCount) {
                            _.$refs.infiniteLoading2.$emit('$InfiniteLoading:complete');
                        }
                    })
                }
            }
        })
    })
</script>
<script>
    $(window).scroll(function () {
        var _t = $(window).scrollTop();
        var _h = $(".m-tab2").offset().top;
        if (_t > 0) {
            $(".m-tab2").addClass("fixed");
        } else {
            $(".m-tab2").removeClass("fixed");
        }
    });
</script>
<script src="https://qiyukf.com/script/97f24cc2cee80a413ccba24d57e94003.js" defer async></script>

</body>
</html>